import React, { useState, useEffect } from 'react'
import { Card, Button, List, Avatar, Badge } from 'antd'
import { IDraggable } from '../../../../dnd/component_type'

export default function NotificationPreview (props: IDraggable) {
  const { config, data, meta } = props
  const [current, setCurrent] = useState('mail');

  const handleClick = (e: any) => {
    console.log('click ', e);
    setCurrent(e.key)
  };

  const list = [
    {
      title: 'Racing car sprays burning ...',
      hasRead: false,
    },
    {
      title: 'Japanese princess.',
      hasRead: false,
    },
    {
      title: 'Australian walks 100km.',
      hasRead: true,
    },
    {
      title: 'Man charged over missing .',
      hasRead: true,
    },
  ];

  return (
    <Card
      title="通知中心" 
      bordered={false}
      // extra={} 
    >
      <List
        itemLayout="horizontal"
        dataSource={list}
        renderItem={item => (
          <List.Item>
            <List.Item.Meta
              avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
              title={<a href="https://ant.design"><Badge dot={!item.hasRead}>{item.title}</Badge></a>}
              description={'Los Angeles battles huge wildfires. '}
            />
          </List.Item>
        )}
      />
    </Card>
  );
}